<template>
  <div class="input">
    <div class="input_phone" v-if="content == 'phone'">
      <!-- <input type="text" placeholder="请输入手机号" v-model="phoneNumber" /> -->
      <div class="input_phone_input">
        <van-field v-model="phoneNumber" :class="{right_phone:rightPhone}" placeholder="请输入手机号" />
      </div>
      <div class="input_phone_input">
        <van-field v-model="phoneVerifiCode" placeholder="请输入验证码">
          <template #button>
            <van-button
              size="small"
              type="primary"
              v-if="SMSCode"
              @click="sendSMSCODE"
            >
              <div>
                <span class="SMSCODE_send">发送验证码</span>
              </div>
            </van-button>
            <van-count-down
              :time="time"
              :format="format"
              class="SMSCODE_time"
              @finish="countFinish"
              v-else
            />
          </template>
        </van-field>
      </div>
    </div>
    <div class="input_password" v-else>
      <div class="input_phone_input">
        <van-field v-model="passwordNumber" placeholder="请输入账号" />
      </div>
      <div class="input_phone_input">
        <van-field v-model="passwordCode" placeholder="请输入密码">
          <template #button>
            <div class="hiddenButton">
              <van-button size="small" type="primary" style="visibility: hidden">
                发送验证码
              </van-button>
            </div>
          </template>
        </van-field>
      </div>
    </div>
    <div class="input_checkbox">
      <van-checkbox v-model="checked">我已同意问诊协议</van-checkbox>
    </div>
    <div class="input_submit">
      <van-button
        size="large"
        :loading="isLoading"
        loading-text="登录中..."
        type="primary"
        @click="toLogin"
      >
        登录
      </van-button>
    </div>
    <div class="input_loginTips">
      <span>
        注册
      </span>
      <span>忘记密码</span>
    </div>
    <div class="input_buttom"><hr /></div>
  </div>
</template>

<script>
import storage from "@/utils/storage.js";
import MJCrequesting from "@/service/index.js";
import { Toast } from "vant";
export default {
  props: {
    content: {
      type: String,
      required: true,
      default() {
        return "phone";
      },
    },
  },
  data() {
    return {
      checked: false,
      phoneNumber: "",
      phoneVerifiCode: "",
      passwordNumber: "b0001",
      passwordCode: "123456",
      // passwordNumber: "",
      // passwordCode: "",
      user_type: '',
      isLoading: false,
      time: 60 * 1000,
      format: "ss",
      SMSCode: true,
    };
  },
  mounted() {
    let user_type = this.$route.query.user_type;
    this.user_type = user_type;
  },
  computed: {
    rightPhone() {
      //利用正则对手机号匹配
      return /^1[3456789]\d{9}$/.test(this.phoneNumber);
    }
  },
    methods: {
      async toLogin() {
        if (!this.checked) {
          Toast.fail("请同意问诊协议");
          return;
        }
        if (this.content == "phone") {
          if (!this.rightPhone || !/^\d{6}$/.test(this.phoneVerifiCode.length)) {
            Toast.fail("请填写完整");
            return;
          }

          //后端没有完成手机验证码登录或注册的接口，暂时无法使用手机验证码的相关功能（只能请求到手机验证码），这部分功能先空着（上面）


        } else {
          //密码登录
          if (this.passwordNumber.length == 0 || this.passwordCode.length == 0) {
            Toast.fail("请填写完整");
            return;
          }
          this.isLoading = true;
          try {
            const result = await MJCrequesting.request({
              url: "http://106.54.189.155:6768/user/login",
              method: "GET",
              headers: {
                "Content-Type": "none",
              },
              params: {
                userName: this.passwordNumber,
                password: this.passwordCode,
              },
            });

            if (result.data.msg) {
              Toast.fail(result.data.msg);
              this.isLoading = false;
              return;
            }
            if (result.status != 200) return;
            const {authorization} = result.data;
            storage.set("authorization", authorization);
            this.isLoading = false;
            await this.$router.push({
              path: "/loginData",
              query: {user_type: `${this.user_type}`},
            });
            this.$store.commit("recordUserType", {user_type: this.user_type});
            this.$store.commit("saveappuserInfo", result.data);
            console.log(result.data);
            let appuserInfo = {
              isLogin: true,
              name: this.passwordNumber,
              id:this.id,
            };
            //从后端获取到的用户数据并存到本地
            localStorage.setItem("appuserInfo", JSON.stringify(appuserInfo));
            this.$store.state.appuserInfo = appuserInfo
            console.log(this.$store.state.appuserInfo)

          } catch (error) {
            console.log(error);
            if (error.status != 200) {
              let err = error.data.msg || "出错了";
              Toast.fail(err);
              this.isLoading = false;
              return;
            }
          }
        }
      },
      async sendSMSCODE() {
        if (this.phoneNumber.length == 0) {
          Toast.fail("请输入手机号");
          return;
        }
        if (!this.checked) {
          Toast.fail("请同意问诊协议");
          return;
        }
        try {
          this.SMSCode = false;
          const result = await MJCrequesting.request({
            url: "http://106.54.189.155:6768/user/regsendcode",
            method: "GET",
            headers: {
              "Content-Type": "none",
            },
            params: {
              phone: this.phoneNumber,
            },
          });
          Toast("发送成功");
          console.log(result);
        } catch (error) {
          Toast("发送失败");
          console.log(error);
        }
      },
      countFinish() {
        this.SMSCode = true;
      },
    },
};
</script>

<style lang="scss" scoped>
.SMSCODE {
  &_send {
    width: 60px;
  }
  &_time {
    width: 75px;

    height: 33px;
    color: #fff;
    display: block;
    background-color: #1989fa;
    line-height: 33px;
    text-align: center;
  }
}
.input_phone_input .hiddenButton {
  visibility: hidden;
}
.input {
  margin-top: 50px;
  &_buttom {
    padding: 0 39px;
    margin-top: 50px;
  }
  &_loginTips {
    margin-top: 20px;
    padding: 0 39px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
  }
  &_submit {
    padding: 0 39px;
    margin-top: 20px;
  }
  &_checkbox {
    text-align: center;
    padding-left: 40px;
    font-size: 14px;
  }
  &_phone {
    text-align: center;
    &_input {
      padding: 0 38px;
      margin: 10px 0;

      & .van-cell {
        padding: 8px 0 8px 8px;
      }
    }
    &_button {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    &_mask {
      position: relative;
      width: auto;
      display: inline;
      line-height: 28px;

      & span {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 14px;

        display: flex;
        align-items: center;
      }
    }
  }
  &_password {
    text-align: center;
  }
}
input {
  outline: none;
  border: none;
  padding: 7px 7px;
  box-sizing: border-box;
  text-indent: 20px;
  margin: 10px 0;
  padding: 0 20px;
  width: 80%;
  font-size: 20px;
  padding: 10px 0;
}
input::-webkit-input-placeholder {
  color: #666;
  font-size: 14px;
  text-indent: 20px;
}
</style>
